<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${sectionName}"></title>
    <head th:insert="~{import :: head}"></head>
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <style>
        .ui.modal.tiny{
            height: 187px !important;
        }
    </style>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="m-padding-bt-mini m-container-middle" style="min-height: 800px;">
    <div class="ui container m-margin-bt-middle">
        <form action="/admin/post" method="GET" class="ui form segment">
            <div class="inline fields">
                <div class="field">
                    <input type="text" name="search" placeholder="标题" th:value="${search}">
                </div>
                <div class="field">
                    <div class="ui selection dropdown">
                        <input type="hidden" name="tag" th:value="${tag}">
                        <i class="dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div class="menu">
                            <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag}" th:text="${tag}">分类名</div>
                        </div>
                    </div>
                    <a href="/admin/post" class="ui compact button">clear</a>
                </div>
                <div class="field">
                    <button class="ui mini teal button"><i class="search icon"></i>搜索</button>
                </div>
            </div>
        </form>
        <table class="ui table">
            <thead>
            <tr>
                <th class="center aligned">序号</th>
                <th class="center aligned">标题</th>
                <th class="center aligned">类型</th>
                <th class="center aligned">发布人</th>
                <th class="center aligned">是否匿名</th>
                <th class="center aligned">发布时间</th>
                <th class="center aligned">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="post,iterStat : ${pagination.data}">
                <td class="center aligned" th:text="${(pagination.page - 1) * size + iterStat.count}">1</td>
                <td class="center aligned" th:text="${post.title}">练习</td>
                <td class="center aligned" th:text="${post.tag}">类型</td>
                <td class="center aligned" th:text="${post.user.name}">王凯旋</td>
                <td class="center aligned" th:text="${post.likeCount == 1 ? '是' : '否'}">是</td>
                <td class="center aligned" th:text="${#dates.format(post.gmtCreate,'yyyy-MM-dd HH:mm')}">2019-10-28</td>
                <td class="center aligned">
                    <a href="#" class="ui mini teal button" th:href="${'/publish/' + post.id}">编辑</a>
                    <a href="#" class="ui mini red button" style="color: #fff !important;" onClick="removePost()" th:data-id="${post.id}" th:data-title="${post.title}" th:data-name="${post.user.name}">删除</a>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <th colspan="7">
                <div class="ui pagination menu">
                    <a href="" class="item" th:if="${pagination.showPrevious}" th:href="@{/admin/post/(page=${pagination.page - 1},search=${search},tag=${tag})}">上一页</a>
                    <a href="" class="item" th:if="${pagination.showNext}" th:href="@{/admin/post/(page=${pagination.page + 1},search=${search},tag=${tag})}">下一页</a>
                </div>
                <a href="/publish" class="ui teal right floated mini basic button">新增</a>
            </th>
            </tfoot>
        </table>
    </div>
</div>
<div class="ui tiny modal">
    <div class="header">
        删除帖子
    </div>
    <div class="content">
        是否删除该帖子
    </div>
    <div class="actions">
        <div class="ui button teal cancel">取消</div>
        <div class="ui button red approve" style="color: #fff !important;">确认</div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    $('.ui.dropdown').dropdown();
    function removePost(){
        event.preventDefault();
        let id = event.target.getAttribute("data-id");
        let title = event.target.getAttribute("data-title");
        let name = event.target.getAttribute("data-name")
        $(".tiny.modal").find(".content").text(`是否删除${name}发布的《${title}》帖子`);
        $('.tiny.modal').modal({
            closable: false,
            onDeny: function(){
                return true;
            },
            onApprove: function(){
                $.ajax({
                    type: "DELETE",
                    url: `/question/${id}`,
                    success: function (response) {
                        if (response.code == 200) {
                            window.location.reload();
                        } else {
                            if (response.code == 2003) {
                                var isAccepted = confirm(response.message);
                                if (isAccepted) {
                                    $('#myModal').modal({});
                                    // window.open("https://github.com/login/oauth/authorize?client_id=7f316909bf70d1eaa2b2&redirect_uri=" + document.location.origin + "/callback&scope=user&state=1");
                                    // window.localStorage.setItem("closable", true);
                                }
                            } else {
                                alert(response.message);
                            }
                        }
                    }
                });
                return true;
            }
        }).modal('show');
    }
</script>
</body>
</html>